<template>
    <div class="lyrics-main">
        <div class="lyric">
            <li :class="lyric-item [isCurLyric(index)]" v-for="(item,index) in lyricObj" :key="index">{{item.txt}}</li>
        </div>
    </div>
</template>

<script>
// import eventBus from '@/utils/bus'
// import musicApi from "@/Apis/musicApis";
export default {
    name: 'lyricList',
    components: {},
     props:['lyrics'],
    data(){
        return{
            lyric:[],
            lyricObj: [],
            curIndex: 0,
            isFull: false
        }
    },
    methods:{
        //处理歌词
        formartLyric(lrc){
        const lrcReg = /^\[(\d{2}):(\d{2}.\d{2,})\]\s*(.+)$/
        if (!lrc) {
            this.lyric = true
            return
        }
        const lyricLis = lrc.split('\n')
        this.lyric = lrc.lyric
        lyricLis.forEach(item => {
            const arr = lrcReg.exec(item)
            if (!arr) {
                return
            }
            this.lyricObj.push({ t: arr[1] * 60 * 1 + arr[2] * 1, txt: arr[3] })
        })
        // 根据时间轴重排顺序
        this.lyricObj.sort((a, b) => {
            return a.t - b.t
        })
        console.log(this.lyric,this.lyricObj,"formartLyric");
    },
    },
    created(){
        console.log(this.lyric);
        console.log(this.lyrics);
    },
    watch:{
        lyrics(newVal, oldVal){
            console.log(newVal);
            console.log(oldVal);
        }
    },
     // 监听属性 类似于data概念
    computed: {
        lyricName () {
            return [this.local === 'page' ? 'page-lyrics' : '', this.isFull ? 'fullLyrics' : '']
        },
        isCurLyric () {
            return (index) => {
                return index === this.curIndex && !this.local ? 'active' : ''
            }
        },
        // 歌词实时滚动
        transform () {
            if (this.curIndex > 6) {
                return `transform: translateY(-${30 * (this.curIndex - 6)}px)`
            } else {
                return 'transform: translateY(0)'
            }
        }
    },
}
</script>

<style scoped>
.lyrics-main{
    width: 100%;
    height: 500px;
}
.lyric{
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    text-align: center;
}
.lyric::-webkit-scrollbar{
    width: 5px;
}
.lyric::-webkit-scrollbar-thumb {
    background: #343a40; 
    border-radius: 5px; 
}
.lyric::-webkit-scrollbar-track {
    background-color: #ddd
}
.lyric-item{
    list-style: none;
    width: 100%;
}
</style>